<template>
	<view>
		<u-navbar :borderBottom="false" :title="title" backIconSize="40" :background="background"></u-navbar>
		<view class="top">
			<!-- <u-tabs :list="list1" bgColor="#F4F4F7" fontSize="36" @change="change" :bold="true" :current="current" activeColor="#FFC044"
			 :is-scroll="false"></u-tabs> -->
			<u-subsection bgColor="#EFEFEF" fontSize="36" height="80" buttonColor="#FB683D" :current="current"
				inactive-color="#333333" active-color="#FFFFFF" :list="list1" @change="change"></u-subsection>
		</view>
		<view class="content">
			<view class="title"></view>
			<view v-if="list.length>0">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="detail">
						<view class="head">
							<image v-if="current==0" :src="getHead(item.sale_icon)"></image>
							<image v-if="current==1" :src="getHead(item.buy_icon)"></image>
						</view>
						<view class="user">
							<view class="view">
								<view class="name">
									兑换数量
								</view>
								<view class="text font" style="color: #F46813;">
									{{item.apply_price}}<text> Fmb</text>
								</view>
							</view>
							<view class="view">
								<view class="name">
									兑换目标
								</view>
								<view class="text " v-if="current==0">
									{{item.sale_username}}
								</view>
								<view class="text " v-if="current==1">
									{{item.buy_username}}
								</view>
							</view>
							<view class="view">
								<view class="name">
									兑换时间
								</view>
								<view class="time">
									{{item.cj_time}}
								</view>
							</view>
						</view>
						<view v-if="item.state=='aaa'" class="icon a4">
							<view></view> 自动取消
						</view>
						<view v-if="item.state=='aaa'" class="icon a6">
							<view></view> 申诉完成
						</view>
						<view v-if="item.state=='aaa'" class="icon a5">
							<view></view> 自动完成
						</view>
						<view v-if="item.state=='CONFIRMED'" class="icon a1">
							<view></view> 新上传
						</view>
						<view v-if="item.state=='RESUBMITTED_VOUCHER'" class="icon a3">
							<view></view> 已申诉
						</view>
						<view v-if="item.identity_status==1&&item.state=='APPEAL_BUYER'" class="icon a3">
							<view></view> 已申诉
						</view>
						<view v-if="item.identity_status==2&&item.state=='APPEAL_SELLER'" class="icon a2">
							<view></view> 已驳回
						</view>
						<view v-if="item.identity_status==1&&item.state=='APPEAL_BUYER'" class="icon a2">
							<view></view> 已驳回
						</view>
						<view v-if="item.identity_status==2&&item.state=='REJECT'" class="icon a4">
							<view></view> 被驳回
						</view>
						<view v-if="item.identity_status==1&&item.state=='REJECT'" class="icon a7">
							<view></view> 被申诉
						</view>
						<view v-if="item.identity_status==2&&item.state=='APPEAL_BUYER'" class="icon a8">
							<view></view> 待确认
						</view>
						<view v-if="item.identity_status==1&&item.state=='APPEAL_SELLER'" class="icon a8">
							<view></view> 待确认
						</view>
						<view v-if="item.identity_status==1&&item.state=='WAIT_AGREE_SELLER'" class="icon a8">
							<view></view> 待上传
						</view>
						<view v-if="item.identity_status==2&&item.state=='WAIT_SUBMIT_VOUCHER'" class="icon a1">
							<view></view> 等待上传
						</view>
					</view>
					<view class="right">
						<view class="button" v-if="item.identity_status==1&&item.state=='WAIT_SUBMIT_VOUCHER'"
							@click="toPage('v-index?type=1&zhujian_id='+item.zhujian_id)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b4">
								上传凭证
							</view>
						</view>
						<view class="button" v-if="item.identity_status==1&&item.state=='WAIT_AGREE_SELLER'"
							@click="toast('等待出兑方确认')">
							<image src="../static/u2.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity_status==2&&item.state=='SUBMITTED_VOUCHER'"
							@click="toPage('voucher-b?type=1&zhujian_id='+item.zhujian_id)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity_status==1&&item.state=='SUBMITTED_VOUCHER'"
							@click="toPage('voucher-a?type=0&zhujian_id='+item.zhujian_id)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity_status==1&&item.state=='RESUBMITTED_VOUCHER'"
							@click="toPage('voucher-a?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity_status==2&&item.state=='RESUBMITTED_VOUCHER'"
							@click="toPage('voucher-b?type=2&zhujian_id='+item.zhujian_id)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b1">
								查看凭证
							</view>
						</view>
						<view class="button" v-if="item.identity_status==2&&item.state=='REJECT'"
							@click="toPage('voucher-b?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b2">
								查看驳回
							</view>
						</view>
						<view class="button" v-if="item.identity_status==1&&item.state=='REJECT'"
							@click="toPage('voucher-a?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b2">
								查看驳回
							</view>
						</view>
						<view class="button" v-if="item.identity_status==2&&item.state=='APPEAL_SELLER'"
							@click="toPage('voucher-b?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
						<view class="button" v-if="item.identity_status==1&&item.state=='APPEAL_SELLER'"
							@click="toPage('voucher-a?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<view class="name b3">
								查看申诉
							</view>
						</view>
						<view class="button" v-if="item.identity_status==2&&item.state=='APPEAL_BUYER'"
							@click="toPage('voucher-b?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
						<view class="button" v-if="item.identity_status==1&&item.state=='APPEAL_BUYER'"
							@click="toPage('voucher-a?zhujian_id='+item.zhujian_id+'&state='+item.state+'&identity_status='+item.identity_status)">
							<image src="../static/u1.png" mode=""></image>
							<view class="name b3">
								查看申诉
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						暂无相关数据~
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list1: ['上传凭证', '确认凭证'],
				background: {
					'background': '#FAFAFA'
				},
				title: "蜜贝",
				current: 0,
				active: 0,
				state: 0,
				type: 1,
				list: [],
				page: 1
			}
		},
		onLoad(option) {
			than = this;
			if (option.current) {
				than.current = option.current
			}
			var type = than.current == 0 ? 'shangchuan_count' : 'queren_count'
			than.post("api/kmb/lookMessage", {
				type: type
			}, function(data) {})
		},
		onShow() {
			than.listOfWaitVerify()
		},
		onReachBottom() {
			than.page++;
			than.listOfWaitVerify()
		},
		methods: {
			change(index) {
				than.page = 1;
				than.current = index;
				than.listOfWaitVerify()
			},
			listOfWaitVerify() {
				var apply_type = parseInt(than.current) + 1
				than.post("api/kmb/applyList", {
					page: than.page,
					apply_type: apply_type
				}, function(data) {
					if (than.page == 1) {
						than.list = data;
					} else {
						than.list = than.list.concat(data)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.tabs {
		height: 100rpx;
	}

	page {
		background: #FAFAFA;
	}

	.top {
		padding: 36rpx;
	}


	.content {
		padding: 0 36rpx;
		margin-top: -100rpx;
		border-radius: 70rpx 0px 0px 0px;

		.title {
			height: 83rpx;
		}

		.list {

			height: 295rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			position: relative;

			image {
				width: 89rpx;
				height: 89rpx;
				border-radius: 50%;
			}

			.a1 {
				background: #FCF4E8;
				color: #FF8652;

				view {
					background: #2FD09E;
				}
			}

			.a2 {
				background: #ECF2F8;
				color: #2765F9;

				view {
					background: #2765F9;
				}
			}

			.a3 {
				background: #FEF1F1;
				color: #333333;

				view {
					background: #FD3D28;
				}
			}

			.a4 {
				background: #EFEFEF;
				color: #333333;

				view {
					background: #171515;
				}
			}

			.a5 {
				background: #EFEFEF;
				color: #333333;

				view {
					background: #FFFFFF;
				}
			}

			.a6 {
				background: #EEF8EC;
				color: #1E9E72;

				view {
					background: #2FD09E;
				}
			}

			.a7 {
				background: #FCF5EA;
				color: #FF9C00;

				view {
					background: #FF9C00;
				}
			}

			.a8 {

				background: #FCF5EA;
				color: #FF9C00;

				view {
					background: #FF9C00;
				}
			}

			.icon {
				position: absolute;
				top: 24rpx;
				height: 40rpx;
				right: 25rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding: 9rpx;
				display: flex;
				align-items: center;
				border-radius: 12rpx;

				view {
					margin-right: 12rpx;
					margin-left: 5rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
				}
			}

			.detail {
				height: 206rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;

				.head {
					width: 130rpx;
					height: 129rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.user {
					margin-left: 22rpx;

					.view {
						display: flex;
						align-items: center;
						height: 50rpx;

						.name {
							font-size: 30rpx;
							color: #666666;
							font-weight: bold;
						}

						.time {
							color: #999999;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							margin-left: 23rpx;
						}

						.text {
							margin-left: 23rpx;
							font-size: 28rpx;
							font-weight: bold;
							font-style: initial;

							text {
								font-size: 26rpx;
								margin-left: 10rpx;
							}
						}
					}

					.add {
						color: #F46813;
					}

					.sub {
						color: #1B1B1D;
					}
				}

			}

			.right {
				display: flex;
				align-items: center;


				.button {
					padding: 0 22rpx;
					margin-left: 35rpx;
					text-align: center;
					margin-left: auto;
					border: 1rpx solid #C7C7C7;
					border-radius: 30rpx;
					display: flex;
					align-items: center;

					.name {
						height: 60rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					image {
						margin-right: 13rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
</style>
